import React, { Component } from 'react';
import IceContainer from '@icedesign/container';
import { Table, Dialog, Tree } from '@alifd/next';
import PropTypes from 'prop-types';
import {
  requestSystemRole,
  requestSystemMenu
} from '../../reducer/SystemActions';

import './LiteTable.scss'

const styles = {
  processing: {
    color: '#5485F7',
  },
  finish: {
    color: '#64D874',
  },
  terminated: {
    color: '#999999',
  },
  pass: {
    color: '#FA7070',
  },
};

const treeDatas = [
  {
  label: 'Component',
  key: '1',
  children: [{
      label: 'Form',
      key: '2',
      children: [{
          label: 'Input',
          key: '4'
      }, {
          label: 'Select',
          key: '5',
      }]
  }, {
      label: 'Display',
      key: '3',
      children: [{
          label: 'Table',
          key: '6'
      }]
  }]
},{
  label: 'Component2',
  key: '2',
  children: [{
      label: 'Form',
      key: '2',
      children: [{
          label: 'Input',
          key: '4'
      }, {
          label: 'Select',
          key: '5',
      }]
  }, {
      label: 'Display',
      key: '3',
      children: [{
          label: 'Table',
          key: '6'
      }]
  }]
},{
  label: 'Component2',
  key: '3',
  children: [{
      label: 'Form',
      key: '2',
      children: [{
          label: 'Input',
          key: '4'
      }, {
          label: 'Select',
          key: '5',
      }]
  }, {
      label: 'Display',
      key: '3',
      children: [{
          label: 'Table',
          key: '6'
      }]
  }]
},{
  label: 'Component2',
  key: '4',
  children: [{
      label: 'Form',
      key: '2',
      children: [{
          label: 'Input',
          key: '4'
      }, {
          label: 'Select',
          key: '5',
      }]
  }, {
      label: 'Display',
      key: '3',
      children: [{
          label: 'Table',
          key: '6'
      }]
  }]
},{
  label: 'Component2',
  key: '5',
  children: [{
      label: 'Form',
      key: '2',
      children: [{
          label: 'Input',
          key: '4'
      }, {
          label: 'Select',
          key: '5',
      }]
  }, {
      label: 'Display',
      key: '3',
      children: [{
          label: 'Table',
          key: '6'
      }]
  }]
},{
  label: 'Component2',
  key: '6',
  children: [{
      label: 'Form',
      key: '2',
      children: [{
          label: 'Input',
          key: '4'
      }, {
          label: 'Select',
          key: '5',
      }]
  }, {
      label: 'Display',
      key: '3',
      children: [{
          label: 'Table',
          key: '6'
      }]
  }]
}];

export default class LiteTable extends Component {
  static displayName = 'LiteTable';

  constructor(props) {
    super(props);
    this.state = {
      visible: false,
      dialogRecord: {},
      roleList: [],
      menuList: [],
      treeData: [],
      treeChecked: [],
    }
  }

  componentDidMount() {
    this.onRefresh();
  }

  renderStatus = (value) => {
    return statusComponents[value];
  };

  onRefresh = () => {
    let that = this;
    Promise.all([requestSystemRole(),requestSystemMenu()])
    .then((result) => {
      console.log(result)
      if (result && result.length > 0) {
        that.setState({
          roleList: result[0].data.rows,
          menuList: result[1].data.menuDatas
        })
      }
    })
    .catch((error) => {})
  }

  renderCell = (value, index, record) => {
    return <a href="javascript:;" onClick={() => {this.showDialog(record)}}>编辑</a>;
  }

  showDialog = (record) => {
    console.log('record==',record)
    //根据菜单、角色渲染tree
    const { menuList } = this.state;
    let _treeData = [], _treeChecked = [];
    let _currentAuthority = record.roleKey;
    for (let i = 0; i < menuList.length; i++) {
      let _parent = {
        label: menuList[i].name,
        key: menuList[i].path
      };
      if (menuList[i].authority && menuList[i].authority.indexOf(_currentAuthority) > -1) {    //判断是否有权限
        _treeChecked.push(menuList[i].path)
      }

      let children = menuList[i].children ? menuList[i].children : [];
      if (children && children.length > 0) {
        let _child = [];
        for (let k = 0; k < children.length; k++) {
          let _childObj = {
            label: children[k].name,
            key: children[k].path
          };
          if (children[k].authority && children[k].authority.indexOf(_currentAuthority) > -1) {
            if (_treeChecked.indexOf(children[k].path) < 0) {    //如果已经存在key
              _treeChecked.push(children[k].path);
            }
          }
          _child.push(_childObj);
        }
        _parent.children = _child;
      }
      _treeData.push(_parent);
    }
    console.log('_treeData===',_treeData)
    console.log('_treeChecked===',_treeChecked);
    this.setState({
      visible: !this.state.visible,
      dialogRecord: {
        roleName: record.roleName
      },
      treeData: _treeData,
      treeChecked: _treeChecked,
    })
  }

  onSelect(keys, info) {
    console.log('onSelect', keys, info);
  }

  onCheck(keys, info) {
      console.log('onCheck', keys, info);
  }

  onDialog = (type) => {
    const { treeChecked } = this.state;
    if (type === "ok") {

    } 
    this.setState({
      visible: !this.state.visible,
    })
  }

  render() {
    const { visible, dialogRecord, roleList, treeData, treeChecked } = this.state;

    return (
      <div className="lite-table">
        <IceContainer style={styles.tableCard}>
          <Table 
          dataSource={roleList && roleList.length > 0 ? roleList : []} 
          hasBorder={false}
          >
            <Table.Column title="角色编号" dataIndex="roleId" width={100} />
            <Table.Column title="角色字符" dataIndex="roleName" width={200} />
            <Table.Column title="权限字符" dataIndex="roleKey" width={100} />
            <Table.Column title="创建时间" dataIndex="createTime" width={200} />
            <Table.Column 
              title="操作" 
              width={200} 
              cell={this.renderCell}
            />
          </Table>
          {
            visible ? (
            <Dialog title="修改角色"
                visible={visible}
                onOk={() => this.onDialog('ok')}
                onCancel={() => this.onDialog('cancel')}
                onClose={() => this.onDialog('close')}
                style={{width: '800px',height: '700px'}}
                className="lite-dialog"
            >
                <div className="role-box">
                  <label>角色名称：</label>
                  <span>{dialogRecord.roleName}</span>
                </div>
                <div className="role-box">
                  <label>菜单权限：</label>
                  <Tree checkable editable
                    onSelect={this.onSelect}
                    onCheck={this.onCheck}
                    dataSource={treeData} 
                    defaultCheckedKeys={treeChecked}
                  />
                </div>
            </Dialog>
            ) : ""
          }
        </IceContainer>
      </div>
    );
  }
}
